<template>
	<view class="container">

		<view class="uni-flex" style="align-items: center;">
			<image style="width: 106px;height: 55px;border-radius: 10px;" src="../../static/image/logo-title.png"></image>
			<img src="../../static/image/logo-desc.png" alt="">

			<view class="search_contain_left">
				<view class="search_contain_box">
					<!-- <image class="com_search_icon" /> -->
					<input type="text" class="search_info" autocomplete="off" placeholder="粘贴宝贝标题或输入关键词找优惠券" v-model="searchInput">
				</view>
				<view type="submit" class="search_btn" @click="searchCoupon">找券</view>
				<ul class="search_items" id="search_items" style="display: none;">
				</ul>
			</view>

			<view class="uni-flex" style="align-items: flex-end;justify-content: flex-end;flex: 1;">
				<text style="padding: 10px;cursor: pointer;" class="login" @click="login()">登录</text>
				<text style="padding-top: 10px;padding-bottom: 10px;">|</text>
				<text style="padding: 10px;cursor: pointer;" class="login">注册</text>
			</view>
		</view>

		<view class="tabbar">
			<text :class="curPageIndex==0?'tabbar-active haowu-tab0':'tabbar-normal haowu-tab0'" @click="select(0)">首页</text>
			<text :class="curPageIndex==1?'tabbar-active':'tabbar-normal'" @click="select(1)">精选好物</text>
			<text :class="curPageIndex==2?'tabbar-active':'tabbar-normal'" @click="select(2)">优惠折扣</text>
			<text :class="curPageIndex==3?'tabbar-active':'tabbar-normal'" @click="select(3)">搜优惠券</text>
		</view>
		<!-- 首页 -->
		<view v-show="curPageIndex==0">


			<view style="display: flex;flex-direction: row;justify-content: space-between;width: 1120px;height: 376px;">
				<view class="uni-web-flex uni-web-column" style="width: 206px;">
					<text style="font-size: 22px;font-weight: bold;color: #F24F60;">今日值得买</text>
					<text style="font-size: 12px;font-weight: bold;color: #999;">万里挑一的高性价比好物，买TA！</text>

					<swiper class="swiper" :autoplay="pageHome.autoplay" :interval="pageHome.intervalZhidemai" :duration="pageHome.durationZhidemai"
					 :disable-touch="true" :circular="true">
						<swiper-item v-for="(page,pindex) in pageHome.zhiDeMaiPages" :key="pindex" style="margin-top: 15px;">

							<view style="display: flex;flex-direction: column;justify-content: space-between;height: 310px;width: 206px">
								<view v-for="(product,index) in pageHome.zhiDeMaiPages[pindex]" :key="index">
									<a :href="product.couponurlGoods" target="_blank" style="text-decoration: none;">
										<view style="display: flex;flex-direction: row;">
											<view style="position: relative;width: 95px;height: 95px;">
												<image style="width: 95px;height: 95px;border-radius: 4px;position: absolute;" :src="product.itempic"></image>
												<text style="width: 95px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;height: 24px;line-height: 24px;font-size: 12px;color: #FFFFFF;
										background-color: rgba(77,116,255,.8);bottom: 0px;left: 0px;position: absolute;text-align: center;">日销量{{product.todaysale}}</text>
											</view>

											<view style="display: flex;flex-direction: column;flex: 1;justify-content: space-between;margin-left: 10px;">
												<view class="uni-web-flex uni-web-column">
													<text class="zhidemai-title" style="text-decoration: none;font-size: 10px;">{{product.itemshorttitle}}</text>

													<view class="uni-web-flex-row" style="align-items: center;margin-top: 6px;">
														<view v-if="product.couponmoney" class="uni-web-flex-row" style="align-items: baseline;border: solid 1px #F24F60;width: 41px;">
															<text style="background-color: #F24F60;color: #FFFFFF;width: 20px;height: 20px;font-size: 12px;text-align: center;line-height: 20px;">券</text>
															<text style="color: #F24F60;width: 20px;height: 20px;font-size: 12px;text-align: center;line-height: 20px;">{{product.couponmoney}}</text>
														</view>
													</view>
												</view>

												<view style="display: flex;flex-direction: row;align-items: baseline;width: 100%;">
													<text style="color: #f24f60;font-size: 12px;">券后价</text>
													<text style="color: #f24f60;font-size: 18px;margin-left: 2px;">¥</text>
													<text style="color: #f24f60;font-size: 18px;margin-left: 1px;">{{product.itemendprice}}</text>
												</view>
											</view>
										</view>

									</a>
								</view>
							</view>


						</swiper-item>

					</swiper>
				</view>

				<swiper class="swiper" :indicator-dots="pageHome.indicatorDots" :autoplay="pageHome.autoplay" :interval="pageHome.interval"
				 :circular="true" :duration="pageHome.duration" :disable-touch="true" style="width: 668px;height: 376px;">
					<swiper-item v-for="(banner,index) in pageHome.bannerList" :key="index" @click="onClickBanner(banner)">
						<image :src="banner.image" style="width: 100%;height: 100%;" mode="widthFix"></image>
					</swiper-item>

				</swiper>

				<view class="uni-web-flex uni-web-column" style="align-items: flex-start;">
					<!-- <text style="margin-bottom: 25px;">手机扫一扫下载App</text> -->
					<image src="http://res.smzdm.com/resources/public/img/pc_global/qr_guide@2x.gif" style="width: 206px;height: 72px; margin-left: -20px;"></image>
					<!-- 	<view class="uni-web-flex uni-web-column">
						<text>1.精选羊毛商品，为你省钱</text>
						<text>2.实时推荐优惠折扣信息</text>
						<text>3.累计商品100万，持续增加</text>
						<text>4.查历史价, 搜优惠券, 抢优惠折扣</text>
					</view> -->

					<image src="../../static/image/app.png" style="width: 160px;height: 160px;margin-top: 30px;margin-bottom: 30px;"></image>

					<view class="uni-web-flex uni-web-column">
						<a>1.【今日薅羊毛】刷卡指南</a>
						<a>2.【今日薅羊毛】刷卡指南</a>
						<a>3.【今日薅羊毛】刷卡指南</a>
						<a>4.【今日薅羊毛】刷卡指南</a>
					</view>
				</view>


			</view>
			<view style="margin-top: 30px;margin-bottom: 30px;display: flex;flex-direction: row;justify-content: space-between;">
				<text style="border: solid 2px #F24F60;border-top: none;border-right: none;border-bottom: none;font-size: 20px;
			font-weight: bold;padding-left: 16px;">好物精选</text>

				<text style="font-size: 16px;padding-left: 4px;color: #F24F60;" @click="select(1,true)">更多好物></text>

			</view>

			<view class="uni-product-list">
				<view class="uni-product" v-for="(product,index) in pageHome.goodsList" :key="index" @click="goProductDetail(product)">
					<img class="uni-product-image" :src="product.img" mode="widthFix" />
					<view class="top-icon" v-if="product.isHot!=0">{{product.tag}}</view>
					<view class="uni-product-title">{{product.title}}</view>
					<view style="display: flex;flex-direction: row;align-items: baseline;margin-top: 25px;margin-left: 5px;margin-right: 5px;">
						<text style="color: #f24f60;font-size: 13px;">¥</text>
						<text style="color: #f24f60;font-size: 22px;">{{product.price}}</text>
						<text style="color: #a6a4b2;font-size: 13px;margin-left: 2px;">券后价</text>
						<text style="color: #a6a4b2;font-size: 13px;flex: 1;text-align: right;">{{product.remark2}}</text>
					</view>

					<view style="display: flex;flex-direction: row;align-items: center;margin-top: 6px;margin-left: 5px;margin-right: 5px;justify-content: space-between;margin-bottom: 12px;">
						<text style="color: #a6a4b2;font-size: 10px;border: 1px solid #a6a4b2; padding-left: 5px;padding-right: 5px;border-radius: 2px;">{{product.remark}}</text>
						<a style="color: #FFFFFF;font-size: 14px;border-radius: 2px;background-color: #f54e54;width: 70px;text-align: center;height: 28px;line-height: 28px;text-decoration: none;"
						 :href="product.url" target="_blank">领券抢购</a>
					</view>
				</view>
			</view>

			<view style="margin-top: 30px;margin-bottom: 30px;display: flex;flex-direction: row;justify-content: space-between;">
				<text style="border: solid 2px #F24F60;border-top: none;border-right: none;border-bottom: none;font-size: 20px;
			font-weight: bold;padding-left: 16px;">优惠折扣</text>

				<text style="font-size: 16px;padding-left: 4px;color: #F24F60;" @click="select(2,true)">更多优惠></text>
			</view>
			<view class="p2-uni-product-list">
				<view class="p2-product-container" v-for="(product,index) in pageYouhuiProducts.p2Products" :key="index" @click="goProductDetail(product)">
					<view style="display: flex;flex-direction: row;">
						<image class="p2-uni-product-image" :src="product.primaryPicUrl" />
						<view style="display: flex;flex-direction: column;width: 493px;margin-left: 20px;">
							<text style="font-weight: bold;font-size: 18px;color: #000;line-height: 1.5em;overflow: hidden;text-overflow: ellipsis; 
								display: -webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;">{{product.name}}</text>
							<text style="font-size: 13px;color: #999;line-height: 150%;overflow: hidden;margin-top: 10px;text-overflow: ellipsis; 
								display: -webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;">{{product.goodsBrief}}
								<text style="font-size: 13px;color: #f24f60;line-height: 1.5em;overflow: hidden;margin-top: 10px;">完整阅读></text></text>

							<text style="font-size: 13px;color: #f24f60;line-height: 1.5em;overflow: hidden;margin-top: 18px;">3分钟前</text>
						</view>

						<view style="display: flex;flex-direction: row;flex: 1;justify-content: flex-end;align-items: flex-end;">
							<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
								<a style="background-color: #f24f60;width: 110px;height: 35px;text-align: center;color: #FFFFFF;line-height: 35px;text-decoration: none;"
								 @click="openYouhuiUrl(product)" href="javascript:void(0);">直达链接></a>
								<text style="font-size: 12px;color: #f24f60;margin-top: 3px;" v-if="product.channel==4">京东</text>
								<text style="font-size: 12px;color: #f24f60;margin-top: 3px;" v-else-if="product.channel==2">天猫</text>
								<text style="font-size: 12px;color: #f24f60;margin-top: 3px;" v-else>淘宝</text>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
		<!-- 精选好物 -->
		<view v-show="curPageIndex==1">
			<view style="display: flex;justify-content: center;align-items: center;flex-direction: row;">
				<image src="../../static/image/p1-tip.png" style="width: 1140px;height: 56px;margin: auto;"></image>
			</view>

			<view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 15px;">
				<text style="font-size: 17px;color: #3c3c3c;">超值精选·每天9点上新</text>
				<view style="font-size: 17px;color: #3c3c3c;">今日上新<text style="color: #FF0000;">578</text>条</view>
			</view>

			<view class="line-h" style="margin-top: 10px;margin-bottom: 10px;"></view>

			<view class="haowu-tabbar">
				<text v-for="(item, index) in pagePickProducts.catagories" :key="index" :class="pagePickProducts.haowuPageIndex==index?
				(index==0?'haowu-tab-active haowu-tab0':'haowu-tab-active'):(index==0?'haowu-tab-normal haowu-tab0':'haowu-tab-normal')"
				 @click="selectHaowuPage(index)">{{pagePickProducts.catagories[index]}}</text>

			</view>
			<scroll-view scroll-y="true">
				<view class="uni-product-list">
					<view class="uni-product" v-for="(product,index) in pagePickProducts.goodsList" :key="index" @click="goProductDetail(product)">
						<img class="uni-product-image" :src="product.img" mode="widthFix" />
						<view class="top-icon" v-if="product.isHot!=0">{{product.tag}}</view>
						<view class="uni-product-title">{{product.title}}</view>
						<view style="display: flex;flex-direction: row;align-items: baseline;margin-top: 25px;margin-left: 5px;margin-right: 5px;">
							<text style="color: #f24f60;font-size: 13px;">¥</text>
							<text style="color: #f24f60;font-size: 22px;">{{product.price}}</text>
							<text style="color: #a6a4b2;font-size: 13px;margin-left: 2px;">券后价</text>
							<text style="color: #a6a4b2;font-size: 13px;flex: 1;text-align: right;">{{product.remark2}}</text>
						</view>

						<view style="display: flex;flex-direction: row;align-items: center;margin-top: 6px;margin-left: 5px;margin-right: 5px;justify-content: space-between;margin-bottom: 12px;">
							<text style="color: #a6a4b2;font-size: 10px;border: 1px solid #a6a4b2; padding-left: 5px;padding-right: 5px;border-radius: 2px;">{{product.remark}}</text>
							<a style="color: #FFFFFF;font-size: 14px;border-radius: 2px;background-color: #f54e54;width: 70px;text-align: center;height: 28px;line-height: 28px;text-decoration: none;"
							 :href="product.url" target="_blank">领券抢购</a>
						</view>
					</view>
					<text class="loadmore" v-if="pagePickProducts.showLoadMore">{{pagePickProducts.loadMoreText}}</text>
				</view>

			</scroll-view>
		</view>
		<!-- 优惠折扣 -->
		<view v-show="curPageIndex==2">

			<view class="uni-flex uni-row" style="align-items: center;" v-if="pageYouhuiProducts.p2ShopId!=0 || pageYouhuiProducts.p2catagoryId!=0">
				<text style="margin-right: 20px;">已选条件:</text>
				<view class="p2-condition" style="margin-left: 10px;" v-if="pageYouhuiProducts.p2catagoryId!=0" @click="selectYouhuiCatagory(0)">
					<text style="cursor: pointer;">{{pageYouhuiProducts.p2CatagoryName}}</text><text style="color: #f24f60;margin-left: 10px;cursor: pointer;">X</text>
				</view>
				<view class="p2-condition" style="margin-left: 10px;" v-if="pageYouhuiProducts.p2ShopId!=0" @click="selectYouhuiShop(0)">
					<text style="cursor: pointer;">{{pageYouhuiProducts.p2ShopName}}</text><text style="color: #f24f60;margin-left: 10px;cursor: pointer;">X</text>
				</view>
			</view>

			<view class="uni-flex uni-row" style="align-items: center;margin-top: 16px;">
				<text style="margin-right: 30px;">类别:</text>
				<text v-for="(catagory,index) in pageYouhuiProducts.p2catagories" :key="index" :class="pageYouhuiProducts.p2catagoryId == catagory.code?'p2-catagory-active' :'p2-catagory-normal'"
				 @click="selectYouhuiCatagory(index)" style="cursor: pointer;">{{catagory.value}}</text>
			</view>

			<view class="uni-flex uni-row" style="align-items: center;margin-top: 16px;">
				<text style="margin-right: 30px;">商城:</text>
				<text v-for="(shop,index) in pageYouhuiProducts.p2Shops" :key="index" :class="pageYouhuiProducts.p2ShopId == shop.code?'p2-catagory-active' :'p2-catagory-normal'"
				 @click="selectYouhuiShop(index)" style="cursor: pointer;">{{shop.value}}</text>
			</view>

			<view class="line-h" style="margin-top: 20px;margin-bottom: 10px;"></view>

			<scroll-view scroll-y="true">
				<view class="p2-uni-product-list">
					<view class="p2-product-container" v-for="(product,index) in pageYouhuiProducts.p2Products" :key="index" @click="goProductDetail(product)">
						<view style="display: flex;flex-direction: row;">
							<image class="p2-uni-product-image" :src="product.primaryPicUrl" />
							<view style="display: flex;flex-direction: column;width: 493px;margin-left: 20px;">
								<text style="font-weight: bold;font-size: 18px;color: #000;line-height: 1.5em;overflow: hidden;text-overflow: ellipsis; 
								display: -webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;">{{product.name}}</text>
								<text style="font-size: 13px;color: #999;line-height: 150%;overflow: hidden;margin-top: 10px;text-overflow: ellipsis; 
								display: -webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;">{{product.goodsBrief}}
									<text style="font-size: 13px;color: #f24f60;line-height: 1.5em;overflow: hidden;margin-top: 10px;">完整阅读></text></text>

								<text style="font-size: 13px;color: #f24f60;line-height: 1.5em;overflow: hidden;margin-top: 18px;">3分钟前</text>
							</view>

							<view style="display: flex;flex-direction: row;flex: 1;justify-content: flex-end;align-items: flex-end;">
								<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
									<a style="background-color: #f24f60;width: 110px;height: 35px;text-align: center;color: #FFFFFF;line-height: 35px;text-decoration: none;"
									 @click="openYouhuiUrl(product)" href="javascript:void(0);">直达链接></a>
									<text style="font-size: 12px;color: #f24f60;margin-top: 3px;" v-if="product.channel==4">京东</text>
									<text style="font-size: 12px;color: #f24f60;margin-top: 3px;" v-else>天猫</text>
								</view>
							</view>

						</view>

					</view>
					<text class="loadmore" v-if="pageYouhuiProducts.showLoadMore">{{pageYouhuiProducts.loadMoreText}}</text>
				</view>

			</scroll-view>
		</view>
		<!-- 搜优惠券 -->
		<view v-show="curPageIndex==3">
			<view v-if="pageCoupon.showResult">
				<view class="uni-flex uni-row" style="align-items: center;">
					<text style="margin-right: 30px;">商城:</text>
					<!-- <text v-for="(shop,index) in pageCoupon.pShops" :key="index" :class="pageCoupon.pShopId == shop.code?'p2-catagory-active' :'p2-catagory-normal'"
					 @click="selectSearchShop(index)">{{shop.value}}</text> -->

					<view>
						<radio-group @change="pageCouponRadioChange">
							<label v-for="(shop,index) in pageCoupon.pShops" :key="index">
								<radio :value="shop.code" :checked="pageCoupon.pShopId === shop.code" style="transform:scale(0.7)" color="#F24F60" />{{shop.value}}</label>
						</radio-group>
					</view>

				</view>

				<view class="uni-web-list coupon-list" v-if="pageCoupon.productList.length>0">
					<view class="uni-web-flex uni-web-row" style="padding-top: 16px;padding-bottom: 16px;" v-for="(product,index) in pageCoupon.productList"
					 :key="index">
						<image style="width: 120px;height: 120px;" :src="product.pict_url"></image>

						<view style="flex: 1; justify-content: space-between;margin-left: 16px;" class="uni-web-column uni-web-flex">
							<view>
								<view style="color: #000000;font-size: 16px;font-weight: bold;" v-if="pageCoupon.pShopId==1">{{product.title}}</view>
								<view style="color: #000000;font-size: 16px;font-weight: bold;" v-else>{{product.item_title}}</view>
								<view v-if="product.coupon_amount>0">
									<text style="color: #FFFFFF;font-size: 11px;background-color: #F24F60;border-radius: 6px;padding: 3px;">{{product.coupon_amount}}元券</text>
								</view>
							</view>
							<view>
								<view>
									<text style="color: #f24f60;font-size: 13px;">¥</text>
									<text style="color: #f24f60;font-size: 22px;">{{product.juanhou_price}}</text>
									<text style="text-decoration: line-through;color: rgb(153, 153, 153);margin-left: 6px;">{{product.price}}</text>
								</view>

								<view>
									<text style="color: rgb(153, 153, 153);">{{product.shop_title}}</text>
									<text style="margin-left: 16px;color: rgb(153, 153, 153);">{{product.volume}}人付款</text>
								</view>
							</view>
						</view>

						<view style="width: 110px;height: 100px;margin-left: 16px; " class="uni-web-flex-column-center">
							<a target="_blank" :href="product.coupon_share_url">去购买</a>
						</view>
					</view>
				</view>
				<view v-else-if="pageCoupon.productList.length==0 && pageCoupon.showNo" style="margin-top: 30px;">未搜索到商品信息</view>

			</view>
			<view v-else>
				<view style="display: flex;flex-direction: column;width: 100%;height: auto;justify-content: center;align-items: center;">
					<image src="../../static/image/sqt_help_01.png" style="width: 1120px;height: 220px;"></image>
					<image src="../../static/image/sqt_help_02.png" style="width: 1120px;height: 460px;"></image>
					<image src="../../static/image/sqt_help_03.png" style="width: 1120px;height: 300px;"></image>
					<image src="../../static/image/sqt_help_04.png" style="width: 1045px;height: 494px;"></image>
					<image src="../../static/image/sqt_help_05.png" style="width: 250px;height: 74px; margin-top: 50px;"></image>

					<view class="search_contain_left" style="margin-bottom: 150px;">
						<view class="search_contain_box">
							<!-- <image class="com_search_icon" /> -->
							<input type="text" class="search_info" autocomplete="off" placeholder="粘贴宝贝标题或输入关键词找优惠券">
						</view>
						<view type="submit" class="search_btn">找券</view>
						<ul class="search_items" id="search_items" style="display: none;">
						</ul>
					</view>
				</view>
			</view>


		</view>

		<view v-if="showLogin">
			<view class="login-container" @click="cancleLogin()">
				<view class="login-box" @click.stop="{}">
					<text class="login-title">用户登录</text>

					<input placeholder="请输入邮箱/手机号码/用户名" />

					<input placeholder="请输入密码" />

					<view style="font-size: 13px;width: 100%;font-weight: bold;color: #666666;">

						<checkbox value="cb" color="#F24F60" style="transform:scale(0.7);margin-left: -3px;" />记住登录状态

					</view>
					<view class="forgetAndRegist">
						<a href="https://www.baidu.com/" target="_blank">忘记密码</a>
						<a href="https://www.baidu.com/" target="_blank">立即注册</a>
					</view>

					<button class="login-btn" @click="loginSubmit()">登录</button>

				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import config from '../../common/config.js';
	import apiInfo from '../../common/api-info.js';
	import httpUtils from '../../common/http-utils.js';
	import appUtils from '../../common/app-utils.js'
	export default {
		components: {},
		data() {
			return {
				curPageIndex: 0,
				showLogin: false,
				searchInput: "",
				loading: true,
				pageHome: {
					indicatorDots: true,
					autoplay: true,
					interval: 3000,
					duration: 1500,
					intervalZhidemai: 10000,
					durationZhidemai: 1000,
					bannerList: [{
						image: "https://gw.alicdn.com/tfs/TB1iwoaSBr0gK0jSZFnXXbRRXXa-800-450.png",
						link: "https://s.click.taobao.com/ebk7Atu"
					}, {
						image: "https://gw.alicdn.com/tfs/TB13BYl4Nv1gK0jSZFFXXb0sXXa-800-450.jpg",
						link: "https://s.click.taobao.com/s3Q7Atu"
					}],
					goodsList: [],
					zhiDeMaiPages: [],
				},
				pagePickProducts: {
					pageNo: 1,
					loadMoreText: "加载中...",
					showLoadMore: false,
					haowuPageIndex: 0,
					catagories: ['全部', '服饰穿搭', '生活百货', '美食吃货', '美容护理', '母婴儿童', '数码家电'],
					goodsList: [],
				},
				pageYouhuiProducts: {
					pageNo: 1,
					loadMoreText: "加载中...",
					showLoadMore: false,
					//优惠折扣页面；
					p2Products: [],
					p2catagoryId: 0, //默认全部；
					p2catagories: [{
							code: 0,
							value: '全部'
						}, {
							code: 1011004,
							value: '促销打折'
						}, {
							code: 1013006,
							value: '服饰穿搭'
						}, {
							code: 1013002,
							value: '生活百货'
						}, {
							code: 1013000,
							value: '美食吃货'
						}, {
							code: 1012003,
							value: '美妆配饰'
						}, {
							code: 1012002,
							value: '母婴儿童'
						}, {
							code: 1012001,
							value: '数码家电'
						}, {
							code: 1013007,
							value: '运动户外'
						}, {
							code: 1013008,
							value: '汽车用品'
						},
						{
							code: 1013009,
							value: '图书影音'
						}
					],
					p2ShopId: 0,
					p2Shops: [{
							code: 0,
							value: '全部'
						}, {
							code: 2,
							value: '天猫'
						}, {
							code: 4,
							value: '京东'
						},
						// {
						// 	code: 1,
						// 	value: '淘宝'
						// },
					],
					p2CatagoryName: "全部", //默认全部；
					p2ShopName: "全部", //默认全部；
				},
				pageCoupon: {
					showResult: true,
					showNo: false,
					productList: [],
					pShops: [{
						code: 1,
						value: '淘宝'
					}, {
						code: 2,
						value: '京东'
					}],
					pShopId: 1
				}
			}
		},
		onLoad: function() {
			this.getProducts();
			this.getP2getProducts();
			this.getZhiDeMaiPages();
		},
		methods: {
			cancleLogin() {
				this.showLogin = false;
			},
			login() {
				this.showLogin = true;
				// uni.navigateTo({
				// 	url: "../account/login/login/login"
				// })
			},
			loginSubmit() {
				this.$message({
					message: '恭喜你，这是一条成功消息',
					type: 'success'
				});
			},
			getZhiDeMaiPages() {
				var data = {};
				var url = config.isTest ? '/api/chain/todayZhidemai' : config.baseUrl + '/api/chain/todayZhidemai';
				uni.request({
					url: url,
					data: data,
					method: 'GET',
					success: res => {
						console.log(JSON.stringify(res));
						let zhidemaiList = res.data.item_info;
						this.pageHome.zhiDeMaiPages = [];
						for (var i = 0; i < zhidemaiList.length; i += 3) {
							let zhidemaiListNode = new Array(3);
							zhidemaiListNode[0] = zhidemaiList[i];
							zhidemaiListNode[1] = zhidemaiList[i + 1];
							zhidemaiListNode[2] = zhidemaiList[i + 2];
							this.pageHome.zhiDeMaiPages.push(zhidemaiListNode);
						}
					},
					fail: (res, code) => {
						console.log('fail' + JSON.stringify(res));
					}
				})
			},
			onClickBanner(banner) {
				// alert("banner")
				window.open(banner.link, "_blank");
			},
			openYouhuiUrl(product) {
				window.open(product.outLinkEncryption ? product.outLinkEncryption : product.outLink, "_blank");
			},
			onUnload() {
				this.pagePickProducts.loadMoreText = "加载更多";
				this.pagePickProducts.showLoadMore = false;
				this.pageYouhuiProducts.loadMoreText = "加载更多";
				this.pageYouhuiProducts.showLoadMore = false;
			},
			onReachBottom() {
				console.log("onReachBottom");

				if (this.curPageIndex == 1) {
					this.pagePickProducts.showLoadMore = true;
					this.pagePickProducts.pageNo++;
					this.getProducts();
				} else if (this.curPageIndex == 2) {
					this.pageYouhuiProducts.showLoadMore = true;
					this.pageYouhuiProducts.pageNo++;
					this.getP2getProducts();
				}

			},
			select(index, scrollTop) {
				this.curPageIndex = index;
				if (scrollTop) {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					})
				}
				if (index === 3) {
					this.pageCoupon.showResult = true
				}
			},
			selectHaowuPage(index) {
				this.pagePickProducts.haowuPageIndex = index;
				this.pagePickProducts.pageNo = 1;
				this.getProducts();
			},
			selectYouhuiCatagory(index) {
				this.pageYouhuiProducts.p2catagoryId = this.pageYouhuiProducts.p2catagories[index].code;
				this.pageYouhuiProducts.p2CatagoryName = this.pageYouhuiProducts.p2catagories[index].value;
				this.pageYouhuiProducts.showLoadMore = false;
				this.pageYouhuiProducts.pageNo = 1;
				this.getP2getProducts();
			},
			selectYouhuiShop(index) {
				this.pageYouhuiProducts.p2ShopId = this.pageYouhuiProducts.p2Shops[index].code;
				this.pageYouhuiProducts.p2ShopName = this.pageYouhuiProducts.p2Shops[index].value;
				this.pageYouhuiProducts.showLoadMore = false;
				this.pageYouhuiProducts.pageNo = 1;
				this.getP2getProducts();
			},
			getProducts() {
				const requestData = {
					types: this.pagePickProducts.catagories[this.pagePickProducts.haowuPageIndex],
					pageNo: this.pagePickProducts.pageNo,
					pageSize: 20
				};
				httpUtils.apiRequset(apiInfo.getPickCommodities, requestData).then(res => {
					this.pagePickProducts.showLoadMore = false;
					if (this.pagePickProducts.pageNo == 1) {
						this.pagePickProducts.goodsList = [];
					}
					this.pagePickProducts.goodsList = this.pagePickProducts.goodsList.concat(res.data.data);

					if (this.pageHome.goodsList.length == 0) {
						let goosListTmp = [];
						for (var i = 0; i < this.pagePickProducts.goodsList.length; i++) {
							if (i >= 20) {
								break;
							}
							goosListTmp.push(this.pagePickProducts.goodsList[i]);
						}
						this.pageHome.goodsList = goosListTmp;
					}
				})
			},
			getP2getProducts() {
				const requestData = {
					categoryId: this.pageYouhuiProducts.p2catagoryId,
					pageNo: this.pageYouhuiProducts.pageNo,
					channel: this.pageYouhuiProducts.p2ShopId != 0 ? this.pageYouhuiProducts.p2ShopId : null,
					pageSize: 20
				};
				httpUtils.apiRequset(apiInfo.getCommodities, requestData).then(res => {
					this.pageYouhuiProducts.showLoadMore = false;
					if (this.pageYouhuiProducts.pageNo == 1) {
						this.pageYouhuiProducts.p2Products = [];
					}
					this.pageYouhuiProducts.p2Products = this.pageYouhuiProducts.p2Products.concat(res.data);
				})
			},
			getTaobaoItemIdFromUrl(url) {
				if (url.startsWith("https://item.taobao.com/item.htm?id=")) {
					console.log("startsWith:1");
					return url.replace("https://item.taobao.com/item.htm?id=", "");
				} else if (url.startsWith("https://detail.tmall.com/item.htm?id=")) {
					console.log("startsWith:2");
					return url.replace("https://detail.tmall.com/item.htm?id=", "");
				}
				if (url.startsWith("http://item.taobao.com/item.htm?id=")) {
					console.log("startsWith:3");
					return url.replace("http://item.taobao.com/item.htm?id=", "");
				} else if (url.startsWith("http://detail.tmall.com/item.htm?id=")) {
					console.log("startsWith:4");
					return url.replace("http://detail.tmall.com/item.htm?id=", "");
				}

			},
			getTkl(product) {
				var id = this.getTaobaoItemIdFromUrl(product.outLink);
				console.log("outLink:" + product.outLink);
				console.log("id:" + id);
				const requestData = {
					id: id,
					pageNo: 1,
				};
				httpUtils.apiRequset(apiInfo.chainChangeTb, requestData).then(res => {
					var coupon_click_url = res.data.coupon_click_url;
					window.open(coupon_click_url, "_blank");
				});
			},
			searchCoupon() {
				if (!this.searchInput) {
					this.$message.error('请输入搜索内容');
					return;
				}

				this.pageCoupon.showResult = true;
				this.pageCoupon.showNo = false;
				var keywords = this.searchInput;
				const requestData = {
					keywords: keywords
				};
				uni.showLoading({
					mask: true
				})
				//淘宝
				if (this.pageCoupon.pShopId == 1) {
					httpUtils.postFormdata(apiInfo.searchCouponTb.url, requestData).then(res => {
						uni.hideLoading();
						this.pageCoupon.productList = [];
						if (res.data) {
							this.pageCoupon.productList = this.pageCoupon.productList.concat(res.data);
						}
						this.pageCoupon.showNo = this.pageCoupon.productList.length === 0;
					});
				} //京东
				else if (this.pageCoupon.pShopId == 2) {
					httpUtils.postFormdata(apiInfo.searchCouponJd.url, requestData).then(res => {
						uni.hideLoading();
						this.pageCoupon.productList = [];
						if (res.data) {
							this.pageCoupon.productList = this.pageCoupon.productList.concat(res.data);
						}

						this.pageCoupon.showNo = this.pageCoupon.productList.length === 0;
					});
				}
			},
			pageCouponRadioChange(evt) {
				for (let i = 0; i < this.pageCoupon.pShops.length; i++) {
					if (this.pageCoupon.pShops[i].code === evt.target.value) {
						this.pageCoupon.pShopId = this.pageCoupon.pShops[i].code;
						this.pageCoupon.productList = [];
						if (this.searchInput) {
							if (appUtils.isJingdongUrl(this.searchInput) && this.pageCoupon.pShopId == 2) {
								this.searchCoupon();
							} else if (appUtils.isTaobaoUrl(this.searchInput) && this.pageCoupon.pShopId == 1) {
								this.searchCoupon();
							} else if (!appUtils.isTaobaoUrl(this.searchInput) && !appUtils.isJingdongUrl(this.searchInput)) {
								this.searchCoupon();
							}
						}
						break;
					}
				}
			},
			selectSearchShop(index) {
				this.pageCoupon.pShopId = this.pageCoupon.pShops[index].code;
				this.pageCoupon.showNo = false;
				if (this.searchInput) {
					this.searchCoupon();
				}

			}
		}
	}
</script>
<style>
	.tabbar {
		background-color: #FFFFFF;
		padding-top: 25px;
		padding-bottom: 25px;
		display: flex;
		flex-direction: row;
	}

	.tabbar text {
		color: #000000;
		font-size: 20px;
	}

	.tabbar-active {
		color: #f24f60 !important;
		border-bottom: #f24f60;
		border-bottom-style: solid;
		border-bottom-width: 2px;
		padding-bottom: 15px;
		margin-left: 20px;
	}

	.tabbar-normal {
		margin-left: 20px;
	}

	.container {
		margin: auto;
		width: 1120px;
		margin-top: 20px;
		font-size: 14px;
		line-height: 24px;
	}

	.p1-tip-container {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.p1-tip-text {
		font-size: 15px;
		font-weight: bold;
	}

	.line-h {
		height: 1px;
		background-color: #cccccc;
	}

	.haowu-tabbar {
		color: #3c3c3c;
		font-size: 13px;
		display: flex;
		flex-direction: row;
		margin-bottom: 15px;
	}

	.haowu-tab0 {
		margin-left: 0px !important;
	}

	.haowu-tab-active {
		color: #f24f60;
		font-size: 13px;
		border-bottom: #f24f60;
		border-bottom-style: solid;
		border-bottom-width: 2px;
		padding-bottom: 5px;
		margin-left: 20px;
	}

	.haowu-tab-normal {
		color: #3C3C3C;
		font-size: 13px;
		margin-left: 20px;
	}

	.uni-product-list {
		display: flex;
		width: 1120px;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;
	}

	.uni-product {
		margin-top: 12px;
		display: flex;
		flex-direction: column;
		border: 2px solid #FFFFFF;
		position: relative;
		/* //建立一个相对点 */
	}

	.uni-product:hover {
		border: 2px solid #f24f60;
	}

	.login:hover {
		color: #e62828;
	}

	.uni-product-image {
		height: 256px;
		width: 256px;
		/* position: absolute; */
	}

	.zhidemai-title {
		width: 95px;
		word-break: break-all;
		display: -webkit-box;
		overflow: hidden;
		line-height: 1.5;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 13px;
		color: #333333;
	}

	.uni-product-title {
		width: 246px;
		margin-left: 5px;
		margin-right: 5px;
		margin-top: 10px;
		word-break: break-all;
		display: -webkit-box;
		overflow: hidden;
		line-height: 1.5;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.top-icon {
		width: 40px;
		height: 24px;
		border-bottom-right-radius: 5px;
		background-color: #f51848;
		color: #FFFFFF;
		position: absolute;
		left: 0px;
		top: 0px;
		text-align: center;
	}

	.loadmore {
		text-align: center;
		color: #000000;
		width: 100%;
		height: 70px;
		font-size: 20px;
		line-height: 70px;
	}

	.uni-flex {
		display: flex;
		flex-direction: row;
	}

	.uni-flex-item {
		flex: 1;
	}

	.uni-row {
		flex-direction: row;
	}

	.uni-column {
		flex-direction: column;
	}

	.p2-condition {
		border: 1px solid #f24f60;
		padding-left: 6px;
		padding-right: 6px;
		border-radius: 1px;
	}

	.p2-catagory-active {
		background-color: #f24f60;
		color: #FFFFFF;
		padding-left: 10px;
		padding-right: 10px;
	}

	.p2-catagory-normal {
		background-color: #FFFFFF;
		color: #f24f60;
		padding-left: 10px;
		padding-right: 10px;
	}

	.p2-uni-product-list {
		display: flex;
		width: 1120px;
		flex-direction: column;
		justify-content: center;
	}

	.p2-uni-product-image {
		height: 140px;
		width: 140px;
	}

	.p2-product-container {
		margin-top: 16px;
		margin-bottom: 16px;
		display: flex;
		flex-direction: column;
		border: 2px solid #FFFFFF;
		position: relative;
		/* //建立一个相对点 */
	}

	.search_contain_left {
		margin-left: 30px;
		width: 498px;
		height: 41px;
		border: 2px solid #f54e54;
		border-radius: 3px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.search_info {
		color: #000000;
		padding-left: 16px;
	}

	.search_contain_box {
		flex: 1;
	}

	.search_btn {
		width: 85px;
		height: 41px;
		line-height: 41px;
		text-align: center;
		background-color: #f24f60;
		color: #FFFFFF;
		border-bottom-right-radius: 3px;
		border-top-right-radius: 3px;
	}

	.forgetAndRegist {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 300px;
		margin-top: 25px;
	}

	.login-btn {
		line-height: 35px;
		font-size: 13px;
		margin-top: 30px;
		height: 35px;
		width: 300px;
		background-color: #F24F60;
		color: #FFFFFF;
		border-radius: 3px;
	}

	.login-container {
		position: fixed;
		z-index: 9999;
		background: rgba(0, 0, 0, 0.3);
		/* r:red g:green b:blue a:alpha(半透明):0-1,1是不透明，0是全透明 */
		font-size: 14px;
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		left: 0;
		top: 0;
	}

	.login-box {
		background-color: #FFFFFF;
		border-radius: 10px;
		padding: 25px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.login-title {
		font-weight: bold;
		font-size: 18px;
		margin-bottom: 25px;
	}

	.checkbox {
		width: 13px;
		height: 13px;
	}

	.login-box input {
		padding-left: 5px;
		width: 300px;
		margin-bottom: 25px;
		height: 40px;
		border: 1px solid #dfdfdf;
		font-size: 14px;
	}

	.remember {
		font-weight: bold;
		width: 100%;
		margin-top: 6px;
		margin-left: 10px;
		color: #666;
		font-size: 14px;
	}

	.forgetAndRegist a {
		color: #F24F60;
	}

	.el-message__icon {
		width: 20px;
		height: 20px;
	}

	.coupon-list a {
		background-color: #f24f60;
		width: 110px;
		height: 35px;
		text-align: center;
		color: #FFFFFF;
		line-height: 35px;
		text-decoration: none
	}

	.search_btn:hover {
		cursor: pointer;
	}

	.tabbar text {
		cursor: pointer;
	}

	.haowu-tabbar text {
		cursor: pointer;
	}
</style>
